
<template>
  <div class="stock-record-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="filters">
            <el-input 
              v-model="filter.name" 
              placeholder="商品名称" 
              size="small" 
              clearable 
              style="width: 160px;"
            />
            <el-select 
              v-model="filter.warehouse" 
              placeholder="选择仓库" 
              size="small" 
              clearable
              style="width: 120px;"
            >
              <el-option label="仓库A" value="仓库A" />
              <el-option label="仓库B" value="仓库B" />
            </el-select>
            <el-input 
              v-model="filter.location" 
              placeholder="储位编码" 
              size="small" 
              clearable
              style="width: 140px;"
            />
            <el-button type="success" @click="showAddDialog">新增</el-button>
            <el-button type="primary" @click="exportToCSV">导出</el-button>
          </div>
        </div>
      </template>

      <el-table :data="filteredData" border stripe style="margin-top: 10px;" @row-dblclick="openDetail">
        <el-table-column prop="productCode" label="商品编码" width="120" />
        <el-table-column prop="productName" label="商品名称" width="120" />
        <el-table-column prop="warehouse" label="所在仓库" width="100" />
        <el-table-column prop="location" label="储位编码" width="100" />
        <el-table-column prop="batchNo" label="批次号" width="100" />
        <el-table-column prop="quantity" label="当前数量" width="100" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="lastUpdate" label="最后更新时间" width="160" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <div class="table-actions">
              <el-button  size="small" @click="editRecord(row)">编辑</el-button>
              <el-button type="danger" size="small" @click="deleteRecord(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailVisible" title="库存详情" width="400px">
      <el-form label-width="100px" :model="detailRecord">
        <el-form-item label="商品编码">
          <el-input v-model="detailRecord.productCode" disabled />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="detailRecord.productName" disabled />
        </el-form-item>
        <el-form-item label="仓库">
          <el-input v-model="detailRecord.warehouse" disabled />
        </el-form-item>
        <el-form-item label="储位">
          <el-input v-model="detailRecord.location" disabled />
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="detailRecord.batchNo" disabled />
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="detailRecord.quantity" disabled />
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="detailRecord.unit" disabled />
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="detailRecord.lastUpdate" disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="addDialogVisible" title="新增库存" width="400px">
      <el-form label-width="100px" :model="addRecord">
        <el-form-item label="商品编码">
          <el-input v-model="addRecord.productCode" />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="addRecord.productName" />
        </el-form-item>
        <el-form-item label="仓库">
          <el-select v-model="addRecord.warehouse" placeholder="选择仓库">
            <el-option label="仓库A" value="仓库A" />
            <el-option label="仓库B" value="仓库B" />
          </el-select>
        </el-form-item>
        <el-form-item label="储位">
          <el-input v-model="addRecord.location" />
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="addRecord.batchNo" />
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="addRecord.quantity" type="number" />
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="addRecord.unit" />
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="addRecord.lastUpdate" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRecord">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface StockRecord {
  productCode: string
  productName: string
  warehouse: string
  location: string
  batchNo: string
  quantity: number
  unit: string
  lastUpdate: string
}

const rawData: StockRecord[] = [
  {
    "productCode": "MAT-1000",
    "productName": "水泥",
    "warehouse": "仓库B",
    "location": "Z-011",
    "batchNo": "BATCH-5",
    "quantity": 386,
    "unit": "袋",
    "lastUpdate": "2025-04-24 06:23:48"
  },
  {
    "productCode": "MAT-1001",
    "productName": "红砖",
    "warehouse": "仓库B",
    "location": "Z-020",
    "batchNo": "BATCH-5",
    "quantity": 16,
    "unit": "块",
    "lastUpdate": "2025-04-30 06:23:48"
  },
  {
    "productCode": "MAT-1002",
    "productName": "钢筋",
    "warehouse": "仓库A",
    "location": "Z-004",
    "batchNo": "BATCH-4",
    "quantity": 356,
    "unit": "根",
    "lastUpdate": "2025-05-06 06:23:48"
  },
  {
    "productCode": "MAT-1003",
    "productName": "砂石",
    "warehouse": "仓库B",
    "location": "Z-018",
    "batchNo": "BATCH-1",
    "quantity": 140,
    "unit": "吨",
    "lastUpdate": "2025-05-05 06:23:48"
  },
  {
    "productCode": "MAT-1004",
    "productName": "PVC管",
    "warehouse": "仓库A",
    "location": "Z-009",
    "batchNo": "BATCH-4",
    "quantity": 33,
    "unit": "根",
    "lastUpdate": "2025-04-30 06:23:48"
  },
  {
    "productCode": "MAT-1005",
    "productName": "石膏板",
    "warehouse": "仓库B",
    "location": "Z-014",
    "batchNo": "BATCH-3",
    "quantity": 132,
    "unit": "张",
    "lastUpdate": "2025-04-27 06:23:48"
  },
  {
    "productCode": "MAT-1006",
    "productName": "木板",
    "warehouse": "仓库B",
    "location": "Z-017",
    "batchNo": "BATCH-4",
    "quantity": 328,
    "unit": "块",
    "lastUpdate": "2025-04-17 06:23:48"
  },
  {
    "productCode": "MAT-1007",
    "productName": "防水涂料",
    "warehouse": "仓库A",
    "location": "Z-007",
    "batchNo": "BATCH-2",
    "quantity": 271,
    "unit": "桶",
    "lastUpdate": "2025-05-08 06:23:48"
  },
  {
    "productCode": "MAT-1008",
    "productName": "玻璃",
    "warehouse": "仓库B",
    "location": "Z-020",
    "batchNo": "BATCH-5",
    "quantity": 200,
    "unit": "块",
    "lastUpdate": "2025-04-10 06:23:48"
  },
  {
    "productCode": "MAT-1009",
    "productName": "铝合金型材",
    "warehouse": "仓库B",
    "location": "Z-017",
    "batchNo": "BATCH-2",
    "quantity": 97,
    "unit": "根",
    "lastUpdate": "2025-04-29 06:23:48"
  },
  {
    "productCode": "MAT-1010",
    "productName": "混凝土",
    "warehouse": "仓库B",
    "location": "Z-010",
    "batchNo": "BATCH-3",
    "quantity": 137,
    "unit": "方",
    "lastUpdate": "2025-04-11 06:23:48"
  },
  {
    "productCode": "MAT-1011",
    "productName": "油漆",
    "warehouse": "仓库B",
    "location": "Z-005",
    "batchNo": "BATCH-5",
    "quantity": 426,
    "unit": "桶",
    "lastUpdate": "2025-05-07 06:23:48"
  },
  {
    "productCode": "MAT-1012",
    "productName": "钉子",
    "warehouse": "仓库A",
    "location": "Z-015",
    "batchNo": "BATCH-1",
    "quantity": 389,
    "unit": "盒",
    "lastUpdate": "2025-04-09 06:23:48"
  },
  {
    "productCode": "MAT-1013",
    "productName": "螺丝",
    "warehouse": "仓库A",
    "location": "Z-012",
    "batchNo": "BATCH-3",
    "quantity": 304,
    "unit": "盒",
    "lastUpdate": "2025-04-13 06:23:48"
  },
  {
    "productCode": "MAT-1014",
    "productName": "电线",
    "warehouse": "仓库A",
    "location": "Z-010",
    "batchNo": "BATCH-5",
    "quantity": 342,
    "unit": "卷",
    "lastUpdate": "2025-05-04 06:23:48"
  }
]
const stockData = ref<StockRecord[]>(rawData)

const filter = ref({
  name: '',
  warehouse: '',
  location: ''
})

const filteredData = computed(() => {
  return stockData.value.filter(item =>
    (!filter.value.name || item.productName.includes(filter.value.name)) &&
    (!filter.value.warehouse || item.warehouse === filter.value.warehouse) &&
    (!filter.value.location || item.location.includes(filter.value.location))
  )
})

const detailVisible = ref(false)
const addDialogVisible = ref(false)
const detailRecord = ref<StockRecord>({
  productCode: '', productName: '', warehouse: '', location: '',
  batchNo: '', quantity: 0, unit: '', lastUpdate: ''
})

const addRecord = ref<StockRecord>({
  productCode: '', productName: '', warehouse: '', location: '',
  batchNo: '', quantity: 0, unit: '', lastUpdate: ''
})

// 打开详情弹窗
function openDetail(row: StockRecord) {
  detailRecord.value = { ...row }
  detailVisible.value = true
}

// 打开新增弹窗
function showAddDialog() {
  addDialogVisible.value = true
}

// 编辑记录
function editRecord(row: StockRecord) {
  addRecord.value = { ...row }
  addDialogVisible.value = true
}

// 删除记录
function deleteRecord(row: StockRecord) {
  const index = stockData.value.indexOf(row)
  if (index > -1) {
    stockData.value.splice(index, 1)
  }
}

// 保存新增或编辑的记录
function saveRecord() {
  const existingIndex = stockData.value.findIndex(item => item.productCode === addRecord.value.productCode)
  if (existingIndex > -1) {
    stockData.value[existingIndex] = { ...addRecord.value }
  } else {
    stockData.value.push({ ...addRecord.value })
  }
  addDialogVisible.value = false
}

// 导出功能
function exportToCSV() {
  const header = ['商品编码','商品名称','所在仓库','储位编码','批次号','当前数量','单位','最后更新时间']
  const rows = filteredData.value.map(r => [r.productCode, r.productName, r.warehouse, r.location, r.batchNo, r.quantity, r.unit, r.lastUpdate])
  const csv = [header, ...rows].map(e => e.join(',')).join('\n')
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
  const link = document.createElement('a')
  link.href = URL.createObjectURL(blob)
  link.download = '库存余量记录.csv'
  link.click()
}
</script>

<style scoped>
.stock-record-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* 操作按钮间距调整 */
.table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .filters {
    width: 100%;
    justify-content: flex-end;
  }
}

/* 表格行高调整 */
:deep(.el-table td) {
  padding: 12px 0;
}

/* 按钮紧凑样式 */
.el-button--small {
  padding: 7px 12px;
}
</style>
